<!-- <template>
	<div>
		<button @click="$emit('submit','确定啦')">click me</button>
		<button @click="$emit('close','取消啦')">click me</button>
	</div>
</template> -->

<!-- // <script setup>
// import { ref, computed } from 'vue';
// let props = defineProps({
// 	name: {
// 		type: String
// 	},
// 	str:{
// 		type:String,
// 		default:'哈'
// 	}
// });
// const newName = computed(() => '姓名' + props.name);
// const newName2 = computed(() => props.name + '可以吃饭了');
// </script> -->

<template>
	<div v-if="isshow" style="border: 1px solid red;margin: 20px;">
		<slot></slot>
		{{ newName }}
		<button @click="changeTitle">修改</button>
		<button @click="Button1">确定</button>
		<button @click="Button2">取消</button>
		<sun></sun>
	</div>
</template>

<script setup>
	import { defineAsyncComponent } from 'vue'
	const sun = defineAsyncComponent(() =>
	  import('./sun.vue')
	)
	// import sun from './sun.vue'
import { ref } from 'vue';
let props = defineProps({
	isshow: {
		type: Boolean
	},
	name: {
		type: String
	}
});
let newName = ref(props.name);
const emit = defineEmits({
	submit(d) {
		if (d == '确定') {
			console.log('验证通过');
			return true;
		} else {
			console.warn('验证不通过');
			return false;
		}
	}
});

let Button1 = () => {
	emit('submit', '确定1');
};
let Button2 = () => {
	emit('close', '取消');
};

let changeTitle = () => {
	newName.value = '6娃子';
};
</script>
